<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情界面</title>
    <link rel="stylesheet" href="./header.css">4
    <style>
        /* 商品详情界面 */
        #goods_details{
            position: absolute;
            top: 100px;
            left: 2%;
            width: 93%;
            border-radius: 25px;
            padding:20px;
            background-color: beige;
            z-index: -1;
        }
        /* 用户信息 */
        #user_info{
            background-color:aliceblue ;
            padding:10px;
            border-radius: 10px;
            width: 160px;
        }
        /* 用户头像 */
        #user_info_img{
            width: 150px;
            height: 150px;
        }
        /* 商品详情 */
        #goods_info{
            position: relative;
            top: -315px;
            left:200px;
            background-color:aliceblue ;
            padding:10px;
            width: 680px;
            border-radius: 15px;

        }
        /* 商品详情表格 */
        #goods_table{
            border-spacing: 15px;
            width: 650px;
        }
        /* 商品图片 */
        #goods_img{
            width: 200px;
            height: 200px;
        }
        /* 轮播图片下标的列表 */
        #goods_img_list{
            list-style: none;
        }
        /* 轮播图下标的div */
        #goods_img_list_div{
            width: 200px;
            height: 22px;
            line-height: 22px;
            background-color: rgba(0, 0, 0, 0.1);

        }
        /*轮播图下标列表的li*/
        #goods_img_list li{
            float: left;
            margin-right: 8px;
            cursor:pointer;
        }
        /* 当前播放的图片对应的下标变色 */
        .change_green{
            color: teal;
        }
        /* 商品数量选择器 */
        .number_select{
            font-size: 5mm;

        }
        /* 调整输入框的大小 */
        .number_select input{
            width: 50px;
        }

        /* 商品购买按钮 */
        #goods_buy_button{
            font-size: 5mm;
            position: relative;
            bottom: 30px;
            left: 130px;
          
        }
        /* 调整商品评论信息div */
        #goods_comments{
            position:absolute;
            top: 370px;
            left: 220px;
            width: 670px;
            background-color: aliceblue;
            padding: 15px;
            border-radius: 20px;
        }
        /* 调整输入框的位置 */
        #goods_comments_add{
            margin: 5px auto;
            width: 320px;
        }
        /* 调整输入框的大小 */
        #new_comments{
            font-size: 5mm;
        }
        /* 设置回复窗口的样式 */
        #reply_div{
            width: 260px;
            height: 230px;
            padding: 25px;
            border-radius: 25px;
            background-color: blanchedalmond;
            text-align: center;
            position:absolute;
        }
        /* 设置回复窗口按钮的样式 */
        #reply_div button{
            margin-top: 10px;
            border-radius: 20px;
            font-size: 5mm;
        }

        /* 将评论设置成卡片形状 */
        /* 取消前标 */
        .card_ul{
            list-style: none;
            /* 让ul看起来不占空间 */
            /* position: relative;
            right: 50px; */
        }
        /* 设置卡片的布局 */
        .card_div{
            width: 600px;
            margin: 5px auto;
            background-color: white;
            padding: 10px;
            border-radius :15px;;
        }
        /* 调整回复标记的大小 */
        .card_div div:last-child p{
            font-size: 3mm;
        }
        /* 调整发表时间的大小 */
        .card_div div:first-child span:last-child{
            font-size: 3mm;
        }
    
    </style>
</head>
<body>
    <script src="./header_html.js"></script>
    <!-- 商品详情界面 -->
    <div id="goods_details">
        <!-- 买家或卖家信息 -->
        <div id="user_info">
            <table>
                <tr>
                    <td>
                        <!-- 头像 -->
                        <img v-bind:src="user.img" alt="" id="user_info_img" >
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- 用户名 -->
                        <span>{{user.name}}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- 用户自述 -->
                        <p>{{user.readme}}</p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- 出售商品数量 -->
                        <span>在售商品数量：{{user.sell_number}}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- 求购商品数量 -->
                        <span>求购商品数量：{{user.ask_number}}</span>
                    </td>
                </tr>
            </table>
       
            
        </div>
        <!-- 商品信息 -->
        <div id="goods_info">
            <!-- 商品详情表格 -->
            <table id="goods_table">
                <tr>
                    <!-- 商品图片 轮播图 -->
                    <td rowspan="3">
                        <!-- 轮播图的图片  -->
                        <img id="goods_img" v-bind:src="goods.imgs[current_img]" alt="">
                        <!-- 轮播图的下标 -->
                        <div id="goods_img_list_div">
                        <ul id="goods_img_list">
                            <li v-on:click="change_img(current_img-1)" >&lt;</li>
                            <li v-for="(item, index) in goods.imgs" v-on:click="change_img(index)" v-bind:class="{'change_green':current_img==index}">{{index+1}}</li>
                            <li v-on:click="change_img(current_img+1)">&gt;</li>
                        </ul>
                        </div>
                    </td>
                    <!-- 商品名称 -->
                    <td>商品名称：{{goods.name}}</td>
                </tr>
                <tr>
                    <!-- 商品价格 -->
                    <td>商品价格：{{goods.prices}}</td>
                </tr>
                <tr>
                    <!-- 商品描述 -->
                    <td>商品描述：{{goods.detail}}</td>
                </tr>
                <tr>
                    <td></td>
                    <!-- 购买按钮 -->
                    <td>
                        <button id="goods_buy_button">购买</button>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 商品评论信息 -->
        <div id="goods_comments">
            <!-- 新增评论 -->
            <div id="goods_comments_add">
                <input type="text" id="new_comments" v-model="new_comment">&nbsp;&nbsp;&nbsp;&nbsp;
                <button v-on:click="add_comment()">发表</button>
            </div>
            <!-- 评论列表 -->
            <ul class="card_ul">
                <!-- 评论项 -->
                <li v-for="(item, index) in comments" :key="index">
                    <div class="card_div">
                        <!-- 用户名 -->
                        <div>
                            <button v-on:click="add_comment(item.id)">回复</button>
                            <span>{{item.name}}</span>
                            
                            <span>{{item.time}}</span>
                            
                        </div>
                        <!-- 用横线隔开用户信息和回复 -->
                        <hr>
                        <!-- 评论内容 -->
                        <div>
                            <p v-if="item.to.length>0">回复：{{item.to}}</p>
                            {{item.context}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div id="reply_div"  v-show="isShowReply" >
            <span>回复评论</span>
            <table >
                <tr>
                    <td colspan="2">
                        <textarea id="" cols="30" rows="10"></textarea>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <button @click="closeReplyDiv()">取消</button>
                    </td>
                    <td>
                        <button @click="alert(123)">回复</button>
                    </td>
                </tr>
            </table>
        </div>
    </div >
 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="./header_js.js"></script>
    <script src="./cookie_function.js"></script>
    <script>
        let goods_details = new Vue({
            el:"#goods_details",
            data:{
                // 买家或卖家用户信息
                user:{
                    // 用户头像
                    img:"https://img13.360buyimg.com/seckillcms/s144x144_jfs/t1/122971/5/18428/70297/5face493Ead605f90/b5d61b6a6d862dda.jpg!q70.jpg.webp",
                    // 买家或卖家用户名
                    name:"用户名",
                    // 用户自述
                    readme:"用户自述",
                    // 用户出售商品数
                    sell_number:5,
                    // 用户求购商品数
                    ask_number:0,
                },
                // 商品信息
                goods:{
                    // 商品id
                    id:102,
                    // 商品图片数组
                    imgs:[
                    "https://img14.360buyimg.com/n5/s54x54_jfs/t1/170914/34/7905/48324/60378924E017f3a06/7056860e2c6171b0.jpg",
                    "https://img14.360buyimg.com/n5/s54x54_jfs/t1/170401/19/8076/33290/60378924Ed7611b33/345f4d72053dfa9a.jpg",
                    "https://img14.360buyimg.com/n5/s54x54_jfs/t1/160630/36/7992/27253/60378924E0688046d/7f5471148959021e.jpg"
                    ],
                    // 商品名称
                    name:"Redmi K40 ",
                    // 商品描述
                    detail:"Redmi K40 旗舰骁龙870 三星AMOLED 120Hz高刷直屏 4800万高清三摄相机 33W快充 8GB+256GB 幻境 游戏电竞智能5G手机 小米 红米【购机补贴版】",
                    // 商品价格
                    prices:2499.00
                },
                //轮播图
                current_img:0,//当前播放的图片的数组下标
                timer:null, //定时器
                // 评论
                comments:[
                    {
                        // 用户id
                        id:"001",
                        // 评论的用户
                        name:"一号用户",
                        // 所回复的用户，若长度为0，则不是回复
                        to:"",
                        // 内容
                        context:"这玩意太贵了，打一折把。",
                        // 发表时间
                        time:"无时间"
                    },{
                        id:"002",
                        name:"二号用户",
                        to:"一号用户",
                        context:"贵别买，请圆润地离开。",
                        time:"2021-2-3 13:02"
                    }
                ],
                new_comment:"",
                // 用户想要购买的商品数量
                buy_number:0,
                // 是否显示回复窗口
                isShowReply:false,
                reply_x:0,
                reply_y:0,
            },
            methods: {
                //改变轮播图下标
                change_img(val){
                    // console.log("想要播放的下标："+val);
                    if(val<0){
                        val=this.goods.imgs.length-1;
                    }else if(val>=this.goods.imgs.length){
                        val = 0;
                    }
                    this.current_img=val;
                },
                // 新增评论
                add_comment(val){
                    let user = get_cookie('user_id');
                    if(user.length==0){
                        alert("请登陆！");
                    //新增评论
                    }else if(val==null){
                         
                    //回复评论
                    }else{
                        this.showReplyDiv()
                        
                    }
                    
                },
                change_number(val){
                    if(val<0){
                        this.buy_number=0;
                    }else if(val<=this.goods.number){
                        this.buy_number=val;
                    }
                },
                // 显示回复窗口
                showReplyDiv(){
                    let x = window.event.pageX;
                    let y = window.event.pageY;
                    x=x-155
                    y=y-400
                    this.isShowReply=true
                    let d = document.getElementById("reply_div")
                    d.style.top=y+"px"
                    d.style.left=x+"px"
                },
                // 关闭回复窗口
                closeReplyDiv(){
                    this.isShowReply=false
                    console.log("测试");
                }
            },
            mounted(){
                // 监听或者说实现定时器
                this.timer=setInterval(()=>{
                    this.change_img(this.current_img+1);
                },3000)
            },
            beforeDestroy() {
                // 清理定时器
                clearInterval(this.timer)   
            }
        })
        
    </script>
</body>
</html>